@charset "UTF-8";

html {
  background-image: radial-gradient(ellipse at top center, #eef2d9, rgba(217, 217, 242, 0)), radial-gradient(circle at bottom left, #d9d9f2, rgba(217, 217, 242, 0)), radial-gradient(circle at bottom right, #eeffcc, rgba(217, 217, 242, 0));
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.2) inset;
  min-height: 100%;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
}

.window {
  position: relative;
  margin: 0px auto;
  width: 840px;
  height: 640px;
  border-radius: 4px;
  border: 1px solid #C1C1BF;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
  background: whitesmoke;
  overflow: hidden;
}

body.admin-menu {
  margin-top: 20px !important;
  margin-left: 0px;
}

.conv-list-view {
  position: absolute;
  width: 270px;
  height: 100%;
  box-shadow: 0 0 4px rgba(128, 128, 128, 0.7);
  background: white;
  z-index: 1;
}

.conv-list-view__header {
  height: 50px;
  border-bottom: 1px solid #F0F0F0;
}

.status__indicator:after, .status__indicator--online:after, .status__indicator--unread-message:after, .status__indicator--replied-message:after, .status__indicator--read-message:after, .status__indicator:before, .status__indicator--online:before, .status__indicator--unread-message:before, .status__indicator--replied-message:before, .status__indicator--read-message:before, .message__bubble:after, .message__bubble--send:after, .input:after, .input__emoticon:after, .input__emoticon:before {
  position: absolute;
  content: '';
}

.conv-list, .close-button-list, .function-list {
  list-style: none;
}
.conv-list li, .close-button-list li, .function-list li {
  float: left;
}

.conv-list {
  /*position: absolute;*/
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
}
.conv-list li {
  box-sizing: border-box;
  padding: .6em .5em;
  width: 100%;
  border-bottom: 1px solid #CCC;
  overflow-x: hidden;
}
.conv-list .selected {
  background-color: #FBFBFB;
  box-shadow: 0 1px 1px 0 rgba(230, 230, 230, 0.3) inset, 0 -1px 1px 0 rgba(230, 230, 230, 0.3) inset;
}

.close-button-list {
  display: inline-block;
  margin: 0;
  padding: 19px 10px;
  float: left;
}
.close-button-list li {
  width: 12px;
  height: 12px;
  margin-left: 8px;
  background-image: radial-gradient(20px 15px at center 15%, #ffffff, rgba(255, 255, 255, 0) 35%), radial-gradient(30px 30px at center bottom, #ffffff, rgba(0, 0, 0, 0));
  background-color: #D9D9D9;
  border-radius: 100%;
  box-shadow: 0 1px 1px rgba(61, 41, 41, 0.4) inset, 0 -1px 1px rgba(61, 41, 41, 0.3) inset;
}

.chat-status {
  position: relative;
  float: left;
}

.status__indicator, .status__indicator--online, .status__indicator--unread-message, .status__indicator--replied-message, .status__indicator--read-message {
  position: absolute;
  left: 0;
  width: 8px;
  height: 100%;
}
.status__indicator:after, .status__indicator--online:after, .status__indicator--unread-message:after, .status__indicator--replied-message:after, .status__indicator--read-message:after, .status__indicator:before, .status__indicator--online:before, .status__indicator--unread-message:before, .status__indicator--replied-message:before, .status__indicator--read-message:before {
  top: 50%;
}

.status__indicator--online:after, .status__indicator--unread-message:after {
  margin-top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  box-shadow: 0 0 1px #1a1a1a inset, 0 -1px 3px rgba(38, 38, 38, 0.6) inset;
  background-color: #66B736;
}

.status__indicator--unread-message:after {
  background-color: #5383E3;
}

.status__indicator--replied-message {
  left: -2px;
}
.status__indicator--replied-message:before {
  margin-top: -4px;
  border-style: solid;
  border-width: 4px 5px 4px 0;
  border-color: transparent #BBBEC4 transparent transparent;
  transform: rotate(360deg);
}
.status__indicator--replied-message:after {
  left: -5px;
  margin-top: -2px;
  width: 16px;
  height: 18px;
  clip: rect(0 auto auto 8px);
  border-top: 4px solid #BBBEC4;
  border-radius: 50%;
}

.status__indicator--read-message:after, .status__indicator--read-message:before {
  background-color: #BBBEC4;
  border-radius: .2em;
}
.status__indicator--read-message:before {
  width: .15em;
  height: .3em;
  transform: rotate(-45deg);
}
.status__indicator--read-message:after {
  margin-top: -.25em;
  left: .28em;
  width: .12em;
  height: .6em;
  transform: rotate(45deg);
}

.status__avatar, .status__avatar--small, .status__avatar--facebook, .message__avatar {
  position: relative;
  display: block;
  float: left;
  width: 2.5em;
  height: 2.5em;
  border-radius: 2.5em;
  margin: 0 .5em 0 0;
  overflow: hidden;
}

.message__avatar_send {
  position: relative;
  display: block;
  float: right;
  width: 2.5em;
  height: 2.5em;
  border-radius: 2.5em;
  margin: 0 .5em 0 0;
  overflow: hidden;
}

.message__avatar_send img {
  width: inherit;
  height: inherit;
}

.message__avatar_send:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*box-shadow: 0 0 0.125em #1a1a1a inset, 0 0 0.312em #1a1a1a inset;*/
  border: 1px solid #CCC;
  border-radius: 5px;
}

.status__avatar:before, .status__avatar--small:before, .status__avatar--facebook:before, .message__avatar:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*box-shadow: 0 0 0.125em #1a1a1a inset, 0 0 0.312em #1a1a1a inset;*/
  border: 1px solid #CCC;
  border-radius: 5px;
}
.status__avatar img, .status__avatar--small img, .status__avatar--facebook img, .message__avatar img {
  width: inherit;
  height: inherit;
}

.status__avatar--small {
  font-size: .8em;
}

.status__avatar--facebook:after {
  box-sizing: border-box;
  position: absolute;
  font-weight: bold;
  content: 'f';
  padding: 0 .3em;
  line-height: 15px;
  right: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  color: white;
  background-color: #485396;
  box-shadow: 0 0 1px #2D3989 inset;
  border-radius: 3px 0 0 0;
}

.meta {
  white-space: nowrap;
}

.meta__sub, .meta__sub--dark, .meta__sub--light {
  font-size: .8em;
}

.meta__sub--dark {
  color: #8D8D8D;
}

.meta__sub--light {
  color: #A5A5A4;
}

.chat-view {
  position: absolute;
  left: 300px;
  right: 0;
  bottom: 0;
  top: 0;
  /*padding: .625em 1.25em 1.25em 1.25em;*/
  background: #FFF;
  z-index: 0;
}

.chat-view__header {
  /*position: relative;*/
  border-bottom: 1px solid #CCC;
  height: 40px;
}
.chat-view__header:after {
  position: absolute;
  content: '';
  bottom: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: radial-gradient(50% 30% at center top, rgba(128, 128, 128, 0.1), rgba(0, 0, 0, 0));
}

.message-view {
  padding: 1em;
  font-size: .9em;
  z-index: 3;
}

.message--send {
  float: right;
  padding-right: 10px;
}

.message__bubble {
  float: left;
  position: relative;
  display: inline-block;
  margin: .1em .75em;
  padding: .6em .8em;
  border-radius: .5em;
  /* text-shadow: 0 1px 1px white; */
  background-color: #EEE;
  color: #000;
  font-weight: bold;
  border: 1px solid #CCC;
  /* box-shadow: 0 1px 1px 0 #CDCDCA; */
  overflow: hidden;
  max-width: 300px;
  word-wrap: break-word;
}

.message__bubble--send {
  float: right;
  position: relative;
  display: inline-block;
  margin: .1em .75em;
  padding: .6em .8em;
  border-radius: .5em;
  /* text-shadow: 0 1px 1px white; */
  background-color: #EEE;
  color: #666;
  font-weight: bold;
  border: 1px solid #CDCDCA;
  /* box-shadow: 0 1px 1px 0 #CDCDCA; */
  overflow: hidden;
  max-width: 300px;
  word-wrap: break-word;
}

.message__bubble:after, .message__bubble--send:after {
  top: 0;
  bottom: 0;
  right: 0;
  border-radius: inherit;
  background: radial-gradient(40% 5px at 50% 5px, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0));
}

.message__bubble--send {
  /*background-color: #E9F2DC;*/
  /*border: 1px solid #B7C8A1;*/
}
.message__bubble--send:after {
  background: radial-gradient(40% 5px at 50% 5px, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0));
}

.message__avatar {
  margin-right: 0;
}

.chat-view__input {
  position: absolute;
  top: 500px;
  bottom: 0;
  left: 0;
  width: 95%;
  padding: .25em .5em .5em .5em;
  /*border-top: 1px solid #d6d6d6;*/
}

#editArea {
  height: 6em;
  overflow-y: auto;
  overflow-x: hidden;
  outline: 0;
  font-size: 14px;
  border: 1px solid #CCC;
  border-radius: 7px;
  padding: 3px 5px;
}

.input {
  position: relative;
  float: left;
  width: 480px;
  margin-top: 1px;
  background: white;
  padding: 0 .3em;
  border: none;
  border-radius: 4px;
  border: 1px solid #CDCDCA;
  box-shadow: 0   0   2px 0  #CDCDCA inset;
  white-space: nowrap;
}
.input:after {
  top: 50%;
  right: -2px;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  background: white;
  box-shadow: 1px -1px 0 .5px #CDCDCA;
  transform: rotate(45deg);
}
.input input {
  font-size: 1.1em;
  appearance: none;
  border: none;
  width: 93%;
  outline: none;
}

.input textarea {

}

.input__emoticon {
  position: relative;
  display: inline-block;
  float: right;
  margin-top: .32em;
  height: .8em;
  width: .8em;
  opacity: .5;
  border: .15em solid #B3B3B1;
  border-radius: 100%;
}
.input__emoticon:after, .input__emoticon:before {
  border-radius: 100%;
}
.input__emoticon:before {
  top: .14em;
  left: .15em;
  width: .2em;
  height: .2em;
  background-color: #B3B3B1;
  box-shadow: .35em 0 0 0 #B3B3B1;
}
.input__emoticon:after {
  top: .12em;
  left: .12em;
  right: .12em;
  bottom: .12em;
  clip: rect(0.3em auto auto 0);
  border: .125em solid #B3B3B1;
}

.function-list {
  margin: 0;
  padding: 5px 0;
  float: right;
}
.function-list li {
  margin-left: 1.25em;
}

.icon-clock, .icon-cloud, .icon-dots, .icon-lupe {
  position: relative;
}
.icon-clock:after, .icon-cloud:after, .icon-dots:after, .icon-lupe:after, .icon-clock:before, .icon-cloud:before, .icon-dots:before, .icon-lupe:before {
  position: absolute;
  content: '';
}

.icon-clock {
  position: relative;
  width: .9em;
  height: .9em;
  border: .13em solid #71716E;
  border-radius: 100%;
}
.icon-clock:after, .icon-clock:before {
  left: .4em;
  background-color: #71716E;
}
.icon-clock:after {
  top: .4em;
  width: .3em;
  height: .13em;
}
.icon-clock:before {
  top: .15em;
  height: .3em;
  width: .13em;
}

.icon-cloud {
  margin: .5em 0;
  width: 1.5em;
  height: .5em;
  background-color: #71716E;
  border-radius: 25em;
}
.icon-cloud:after {
  top: -.25em;
  left: .15em;
  width: .75em;
  height: .75em;
  background-color: inherit;
  border-radius: 100%;
  box-shadow: .4em -.2em 0 .05em #71716E;
}
.icon-cloud:before {
  top: -.4em;
  left: .89em;
  content: '⬆';
  font-size: .55em;
  color: white;
  z-index: 1;
}

.icon-dots {
  width: .35em;
  height: .35em;
  margin-top: .5em;
  margin-right: 1.15em;
  background-color: #71716E;
  border-radius: 100%;
  box-shadow: .5em 0 0 #71716E, 1em 0 0 #71716E;
}

.icon-lupe {
  margin: .85em .9em 0 0;
  width: .4em;
  height: .4em;
  border: .15em solid #71716E;
  border-radius: 100%;
}
.icon-lupe:after {
  height: .38em;
  width: .2em;
  background: #71716E;
  right: -.2em;
  bottom: -.3em;
  transform: rotate(-45deg);
  border-radius: 0 0 1em 1em;
}

h1 {
  text-align: center;
  text-shadow: 0 1px 1px white;
}

.credit {
  font-size: .8em;
  color: gray;
  width: 840px;
  margin: 0 auto;
  text-align: center;
  text-shadow: 0 1px 1px white;
}

a {
  color: #444;
}

a:hover {
  text-decoration: underline;
}

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
  height: 10px;
}

.cf:after {
  clear: both;
}

.btn_send
{
  border:1px solid #c1c1c1;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  font-size:14px;
  padding:3px 20px;
  height: 30px;
  background-color:#597eab;
  color:#FFF;
}

.btn_send:hover
{
  background-color:#597eab;
}

.action {
  margin-top: 5px;
  margin-right: 10px;
}

.messageToSend {
  width:100%;
  overflow:auto;
  word-break:break-all;
  resize : none;
  background-color: transparent;
}

.historyLink {
  display:block;
  text-align: center;
}

p.group-title {
  margin: 0;
  line-height: 39px;
  text-align: center;
  /*background-color: #65b6e7;*/
  color: #444;
  font-weight: bold;
  border-width: 1px;
  border-style: none none solid none;
  border-color: #CCC;
}

.window{
  background-color: #f9f8f4;
}

li.ng-scope {
  background-color: #f9f8f4;
}

header.chat-view__header .ng-binding {
  color: #7D7878;
  font-weight: bold;
  margin-left: 1em;
}

.message__bubble:before {
  width: 10px;
  height: 10px;
  background-color: red;
  background-image: url("../../images/images/right.png");
}

/* scrollbar样式 */
.left {
  width: 306px;
  height: 640px;
  border: 1px solid #ddd;
  overflow-y: scroll;
}

#contact-list::-webkit-scrollbar{
  width:8px;
  background-color:#d4d4d4;
}
#contact-list::-webkit-scrollbar-thumb{
  background-color:#a8a8a8;
}

.right {
  width: 520px;
  height: 420px;
  overflow-y: auto;
  margin: 10px 0 10px;
}

#message-list::-webkit-scrollbar{
  width:8px;
  background-color:#d4d4d4;
}
#message-list::-webkit-scrollbar-thumb{
  background-color:#a8a8a8;
}

/* ----聊天列表时间右对齐-----*/
.meta div {
  width: 290px;
}

.meta div span {
  float: left;
}

last-message.ng-isolate-scope div {
  float: left;
  margin-left: 50px;
  margin-top: -15px;
}

span.meta__sub--light.ng-binding {
  float: right;
  margin-right: 10px;
}
/* ----聊天列表时间右对齐-----*/


/* progress bar */
#progressbar .outbar {border:1px solid #dedede;background:#fff;height:20px;width:280px;float:right;margin-top: 6px;}
#progressbar .inbar {height:20px;display:block;background:#39c;}
#progressbar .inbar-filename {height:20px;display:block;float:left;overflow:hidden;width: 300px;}

.action #sendDiv {float:right;}
.action #fileDiv {float:right; padding-left: 10px; padding-right: 10px;}


#fileUploadButton {
  position: relative;
  border: 0px;
  height: 34px;
  width: 34px;
  overflow: hidden;
  display: block;
  background-image:url("folder-upload.png");
}

#fileUploadButton input {
  top: 0;
  bottom: 0;
  margin-left: -5px;
  right: 0;
  opacity: 0.001;
  width: 34px;
  height: 34px;
}

.chat-title {
  background-color: #597eab;
  width: 839px;
  margin-right: auto;
  margin-left: auto;
}

img.chat-title-img {
  margin-left: 25px;
  margin-top: 10px;
  margin-bottom: 3px;
}

span.chat-title-name {
  color: #FFF;
  font-weight: bold;
  font-size: 17px;
  display: block;
  float: right;
  margin-right: 700px;
  margin-top: 20px;
}

.chat-short-img {
  float: right;
  margin-top: -40px;
  margin-right: 10px;
}